<template>
    <div>
        <div class="topbar">
            <div class="topbaritem">
                <router-link to="/userLogin" tag="span">登录</router-link>
                <p style="flex: 1; text-align: center;">注册</p>
                <!-- <router-link to="/register" tag="span">注册</router-link> -->
            </div>
            <div class="loginbox">
                <div class="logincontent">
                    <div class="logo"><img
                            src="https://static.sonkwo.com/frontend/assets/28c5c9d87ae8d6d29643a68115d74c6d.png" alt="">
                    </div>

                    <div class="phone">
                        <van-icon name="phone-o" />
                        <input v-model="phone" type="text">
                    </div>
                    <div class="phone">
                        <van-icon name="envelop-o" />
                        <input v-model="code" type="text">
                        <button @click="sendmsg">获取</button>
                    </div>
                    <div class="password">
                        <van-icon name="lock" />
                        <input v-model="password" type="password" ref="password">
                        <span @click="hidePas" v-show="pasShow"><van-icon name="eye-o" /></span>
                        <span @click="showPas" v-show="!pasShow"><van-icon name="closed-eye" /></span>
                    </div>
                    <div class="login">
                        <div class="loginbutton">
                            <button @click="register">注册</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>

import { Toast } from 'vant'
export default {
    data() {
        return {
            pasShow: false,//展示密码
            phone: null,//手机(账号)
            password: null,//密码
            code: null,//验证码
        }
    }, methods: {
        hidePas() {
            //展示/隐藏密码
            this.pasShow = !this.pasShow
            this.$refs.password.type = 'password'

        },
        showPas() {
            //展示/隐藏密码
            this.pasShow = !this.pasShow
            this.$refs.password.type = 'text'
        },
        sendmsg() {
            //正则
            let reg =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (reg.test(this.phone)) {
                Toast('已发送验证码')
            } else {
                Toast('请输入正确手机号码')
            }

        },

        register() {
            //正则
            let reg =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // 2.验证密码
            let pass = /^[a-zA-Z0-9]\w{8,17}$/;
            // 3.验证码
            let code = /^[0-9]{4}$/;

            if (!reg.test(this.phone) || !pass.test(this.password)) {
                //不正确
                Toast("请输入正确手机号码与密码");
                return;
            }
            if (!code.test(this.code)) {
                Toast("请输入正确验证码");
                return;
            }
            Toast("注册成功,请去登录");
            // 创建一个user，模拟注册成功
            window.localStorage.setItem("user", JSON.stringify({
                "phone": this.phone,
                "pas": this.password
            }));
            this.$router.push("/userLogin");
        }
    }
}
</script>

<style lang="scss" scoped>
.loginbox {
    width: 100%;

    .phonelogin {
        color: #ff5722;
        font-size: 15px;
    }

    .login {
        padding: 50px 0 25px 0;

        .loginbutton {
            button {
                width: 300px;
                background-color: #ff5722;
                border: none;
                height: 50px;
                color: #fff;
            }

        }
    }

    .logincontent {
        margin-top: 100px;

        .phone {
            display: flex;
            align-items: center;
            margin-top: 20px;
            position: relative;

            button {
                position: absolute;
                right: 0;
                width: 80px;
                background-color: #ff5722;
                color: white;
                border: none;
            }

            input {
                border: 0px;
                margin-left: 10px;
                height: 30px;
                width: 250px;
                border-bottom: 1px solid #cccccc;
                margin-left: 20px;
            }
        }

        .password {
            display: flex;
            align-items: center;
            margin-top: 20px;
            position: relative;

            input {
                border: 0px;
                margin-left: 10px;
                height: 30px;
                width: 250px;
                border-bottom: 1px solid #cccccc;
                margin-left: 20px;
            }

            span {
                position: absolute;
                right: 0;
            }
        }

        .logo {
            margin-bottom: 20px;

            img {
                width: 166px;
                height: 64px;
            }
        }

        height: 100px;

        padding: 80px 20px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}

.topbar {
    height: 44px;

    .topbaritem {
        padding: 0 25px;
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333333;

        span {
            color: #999999;
        }

        p {
            color: #cccccc;
            font-size: 15px;
        }
    }
}
</style>